<template>
  <div>
    <!-- 表格 -->
    <el-table  :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column label="学科名称" width="100" prop="subjectName">
      </el-table-column>
      <el-table-column label="创建者" width="100" prop="username">
      </el-table-column>
      <el-table-column label="创建日期" width="100" prop="addDate">
      </el-table-column>
      <el-table-column label="前台是否显示" width="100" prop="isFrontDisplay">
      </el-table-column>
      <el-table-column label="二级目录" width="100" prop="twoLevelDirectory">
      </el-table-column>
      <el-table-column label="标签" width="100" prop="tags"> </el-table-column>
      <el-table-column label="题目数量" width="100" prop="totals">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small">学科分类</el-button>
          <el-button type="text" size="small">学科标签</el-button>
          <el-button type="text" size="small" @click="hbcc(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="hacc(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-pagination
      background
      layout="prev, pager, next"
      :page-size="params.pagesize"
      :total="counts"
       @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import { list, remove, update } from '@/api/hmmm/subjects.js'
export default {
  data: function () {
    return {
      tableData: [], // 学科列表
      params: {
        page: 1, // 第一页
        pagesize: 5 // 每页几条数据
      },
      counts: 0
    }
  },
  created () {
    this.loadRoles()
  },

  methods: {
    async doEdit () {
      try {
        const rs = await update(this.hbcc())
        console.log('修改之后的结果', rs)
        // 1. 重新加载数据
        this.loadRoles()
        // 2. 提示一下
        this.$message.success('操作成功')
        // 3. 关闭弹层
        this.$emit('bianji')
      } catch (err) {
        // console.log(err.message)
        this.$message.error(err.message)
      }
    },
    // 修改
    hbcc (row) {
      this.$emit('bianji', row)
    },
    // 删除
    async doDel (id) {
      try {
        const rs = await remove({ id: id })
        console.log('删除之后的结果是', rs)
        // 1. 提示
        this.$message.success('删除成功')
        if (this.tableData.length - 1 === 0) {
          this.params.page--
          if (this.params.page === 0) {
            this.params.page = 1
          }
        }
        // 2. 重新加载数据
        this.loadRoles()
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    // 用户点击了删除
    hacc (id) {
      this.$confirm('你确定要删除吗').then(() => {
        this.doDel(id)
      }).catch(() => {

      })
    },
    // 获取数据
    async loadRoles () {
      const res = await list(this.params)
      console.log('xueke', res)
      this.tableData = res.data.items
      // 获取数据数量
      this.counts = res.data.counts
      console.log('111', this.counts)
    },
    // 分页
    handleCurrentChange (curPage) {
      // 1. 更新查询条件中页码
      this.params.page = curPage
      // 2. 重新发一次请求
      this.loadRoles()
    }
  }
}
</script>

<style scoped lang='less'></style>
